<template>
	<el-container class="container">
		<el-aside :width="isCollapse?'64px':'200px'" class="left">
			<h3 style="color: wheat;" :style="isCollapse?'marginLeft:6px;':'marginLeft:25px;'">{{isCollapse?'成绩':'成绩管理系统'}}</h3>
			<el-menu
				:default-active="path"
				class="el-menu-vertical-demo"
				background-color="#545c64"
				unique-opened
				router
				text-color="#fff"
				:collapse="isCollapse"
				
				@select="selectMenu"
				active-text-color="#ffd04b">
				<el-submenu index="1">
					<template slot="title">
						<i class="el-icon-s-data"></i>
						<span>成绩管理</span>
					</template>
					<el-menu-item index="/myGrade">我的成绩</el-menu-item>
					<el-menu-item index="/myClassGrade">班级成绩</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-aside>
		<el-main class="right">
			<el-header>
				<el-button type="text" icon="el-icon-s-fold" style="font-size: 1.5em;" @click="changeCollapse"></el-button>
				<div style="display: inline-block;float: right;">
					欢迎你：
					<el-dropdown @command="handleSelect">
						<span class="el-dropdown-link">
							{{name}}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="a">修改密码</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<el-button type="text" icon="el-icon-switch-button" style="margin-left: 1.25rem;" @click="logout">注销</el-button>
				</div>
			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
			<el-footer>
				<div style="text-align: center;">copyright © 2020-2025 tgc.edu.ljc All Rights Reserved </div>
			</el-footer>
		</el-main>
		<el-dialog :visible.sync="dialogDisable" title="修改密码" width="30%" >
			<el-form :model="form" :rules="rules" ref="pwd" label-width="80px">
				<el-form-item prop="oldPwd" label="旧密码">
					<el-input v-model="form.oldPwd" show-password placeholder="请输入旧密码"/>
				</el-form-item>
				<el-form-item prop="newPwd" label="新密码">
					<el-input v-model="form.newPwd" show-password placeholder="请输入新密码"/>
				</el-form-item>
				<el-form-item prop="pwd2" label="密码确认">
					<el-input v-model="form.pwd2" show-password placeholder="请再次输入新密码"/>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="changePwd">确定</el-button>
				<el-button @click="dialogDisable=false">放弃</el-button>
			</span>
		</el-dialog>
	</el-container>
	
</template>

<script>
	export default {
		data() {
			var checkPwd=(rule,value,callback)=>{
				if(!value){
					return callback('密码确认不能为空');
				}
				setTimeout(()=>{
					if(value!==this.form.newPwd){
						return callback('两次输入的新密码不一致');
					}else{
						callback();
					}
				},100);
			};
			return {
				isCollapse: false,
				dialogDisable:false,
				form:{
					oldPwd:'',
					newPwd:'',
					pwd2:''
				},
				rules:{
					oldPwd:[{required:true,message:'旧密码不能为空',trigger:'blur'}],
					newPwd:[{required:true,message:'新密码不能为空',trigger:'blur'}],
					pwd2:[{validator:checkPwd,trgger:'blur'}]
				}
				
			}
		},
		methods:{
			changeCollapse(){
				this.isCollapse=!this.isCollapse;
			},
			selectMenu(index){
				sessionStorage.setItem("path",index);
			},
			logout(){
				this.$ajax.post('logout',{}).then(res=>{
					var result=res.data;
					if(result.success){
						sessionStorage.removeItem("token");
						sessionStorage.removeItem("name");
						sessionStorage.removeItem("path");
						this.$router.replace('/');
						this.$notify.success({message:result.msg,position:'bottom-right'});
					}
				})
				this.$router.replace("/");
			},
			handleSelect(){
				this.dialogDisable=true;
			},
			changePwd(){
				this.$ajax.post('changePwd',this.form).then(res=>{
					var result=res.data;
					if(result.success){
						this.$ajax.post('logout',{}).then(res=>{
							var result2=res.data;
							sessionStorage.removeItem("token");
							sessionStorage.removeItem("name");
							this.$router.replace('/');
							this.$notify.success({message:result2.msg,position:'bottom-right'});
						})
					}else{
						this.$message.warning(result.msg);
					}
				})
			}
		},
		computed:{
			name(){
				var name=sessionStorage.getItem("name");
				return name?name:'';
			},
			path(){
				var path=sessionStorage.getItem("path");
				console.log(path);
				return path ? path:'/myGrade'
			}
		}
	}
	
</script>

<style scoped>
	.container{
		min-height: 100vh;
	}
	.left{
		background-color: #333333;
	}
	.el-header,.el-footer {
		background-color: #B3C0D1;
		flex-grow: 0;
		line-height: 60px;
	}
	.left>h3 {
		margin-block-start: 0.94em;
		margin-block-end: 0.94em;
	}
	.right{
		padding: 0;
		display: flex;
		flex-direction: column;
	}
	.el-menu {
		/* min-height: calc( 100% - 60px); */
		height: calc(100% - 60px);
		border-right: 0;
	}
	.main2 {
		min-height: calc(100% - 5px);
	}
</style>
